<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryRef" :inline="true">
                    <el-form-item label="检测人员" prop="entName">
                        <el-input v-model="queryParams.entName" placeholder="请输入" clearable style="width: 200px"
                            maxlength="30" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="报告编号" prop="entName">
                        <el-input v-model="queryParams.entName" placeholder="请输入" clearable style="width: 200px"
                            maxlength="30" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="使用单位名称" prop="entName">
                        <el-input v-model="queryParams.entName" placeholder="请输入" clearable style="width: 200px"
                            maxlength="30" @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item style="margin-left: 20px;">
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="loading" :data="detectionList">
                    <el-table-column type="index" align="center" width="60" label="序号" />
                    <el-table-column label="设备信息" align="center" prop="status" width="300">
                        <template #default="scope">
                            <div class="table-item-div" @click="handleDetails(scope.row, 'devcie')">
                                <div>设备品种：{{ scope.row.deviceKind || '' }}</div>
                                <div>使用登记证号：{{ scope.row.deviceKind || '' }}</div>
                                <div>注册代码：{{ scope.row.deviceKind || '' }}</div>
                                <div>设备型号：{{ scope.row.deviceKind || '' }}</div>
                                <div>出厂编号：{{ scope.row.deviceKind || '' }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="报告编号" align="center" prop="userNo" width="160" />
                    <el-table-column label="受理单号" align="center" prop="userNo" width="160" />
                    <el-table-column label="使用单位" align="center" prop="userNo" width="180">
                        <template #default="scope">
                            <div class="table-item-div" style="text-align: center;"
                                @click="handleDetails(scope.row, 'company')">
                                <div>富丽写字楼公司</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="检测信息" align="center" prop="userNo" width="180">
                        <template #default="scope">
                            <div>检测员：{{ scope.row.deviceKind || '' }}</div>
                            <div>检测时间：{{ scope.row.deviceKind || '' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="流程信息" align="center" prop="userNo" />
                    <el-table-column label="结论" align="center" prop="userNo" />
                    <el-table-column label="缴费情况" align="center" prop="userNo" />
                    <el-table-column label="是否复检" align="center" prop="userNo" />
                    <el-table-column label="检测机构" align="center" prop="userNo" />

                    <el-table-column label="操作" fixed="right" align="center" width="220"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button link type="primary">流程历史</el-button>
                            <el-button link type="primary">查看报告</el-button>
                            <el-button link type="primary">查看记录</el-button>
                            <el-button link type="primary">查看备忘录</el-button>
                            <el-button link type="danger">相关附件</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                    @pagination="getList" style="margin-right: 20px;" />
            </el-col>
        </el-row>


        <el-dialog v-model="isShowDetailsPop" width="1100px" title="任务详情">
            <el-tabs v-model="tabActiveName">
                <el-tab-pane label="任务计划" name="task">
                    <TaskPlanInfo :isCanEdit="false"></TaskPlanInfo>
                </el-tab-pane>

                <el-tab-pane label="使用单位" name="company">
                    <el-form :model="detailsInfo" label-width="190px">
                        <el-form-item label="使用单位名称" prop="userName">
                            <el-input v-model="detailsInfo.userName" placeholder="请输入使用单位名称" disabled
                                style="width: 810px" />
                        </el-form-item>
                        <el-form-item label="设备所属区域" prop="area">
                            <el-input v-model="detailsInfo.area" disabled style="width: 270px" />
                        </el-form-item>
                        <div class="flex-v">
                            <el-form-item label="使用单位联系人" prop="nickName">
                                <el-input v-model="detailsInfo.nickName" disabled placeholder="请输入使用单位联系人"
                                    style="width: 270px" maxlength='11' />
                            </el-form-item>
                            <el-form-item label="使用单位联系人手机" prop="phone" style="margin-left: 50px;">
                                <el-input v-model="detailsInfo.phone" disabled placeholder="请输入使用单位联系人手机"
                                    style="width: 300px" maxlength='11' />
                            </el-form-item>
                        </div>
                        <div class="flex-v">
                            <el-form-item label="设备类型" prop="device">
                                <el-input v-model="detailsInfo.device" disabled style="width: 300px" maxlength='11' />
                            </el-form-item>
                            <el-form-item label="报检类型" prop="checkType" style="margin-left: 50px;margin-top: 10px;">
                                <div style="margin-top: -5px;margin-left: 30px;">
                                    <el-radio-group v-model="detailsInfo.checkType" disabled>
                                        <el-radio label="1" size="large">自行检测</el-radio>
                                        <el-radio label="2" size="large">委托检测</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-form-item>
                        </div>
                        <el-form-item label="检验检测机构" prop="checkCompony">
                            <el-select v-model="detailsInfo.checkCompony" disabled placeholder="请选择" clearable
                                style="width: 810px">
                                <el-option label="贵州检联特种设备检验检测有限公司" value="1" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注" prop="note">
                            <el-input v-model="detailsInfo.note" autosize disabled type="textarea" placeholder="请输入"
                                style="width: 810px" />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="设备信息" name="devcie">
                    <DeviceBaseInfo :deviceInfo="detailsInfo" :isCanEdit="false"></DeviceBaseInfo>
                </el-tab-pane>
                <el-tab-pane label="设备参数" name="devcieParams">
                    <DeviceParamsInfo :deviceInfo="detailsInfo" :isCanEdit="false"></DeviceParamsInfo>
                </el-tab-pane>
            </el-tabs>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isShowDetailsPop = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>


        <el-dialog v-model="isShowChangeAssignPlanPop" width="1100px" title="任务转移">
            <TaskPlanInfo></TaskPlanInfo>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="sureChangeAssignPlan">确认</el-button>
                    <el-button @click="isShowChangeAssignPlanPop = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
 
<script setup name="User">
import TaskPlanInfo from '@/components/TaskPlanInfo'
import DeviceBaseInfo from "@/components/DeviceBaseInfo";
import DeviceParamsInfo from "@/components/DeviceParamsInfo";

const { proxy } = getCurrentInstance();

const detectionList = ref([]);
const loading = ref(false);
const total = ref(0);
const detailsInfo = ref({})
const isShowDetailsPop = ref(false)
const tabActiveName = ref('task')
const changeAssignPlanInfo = ref({})
const isShowChangeAssignPlanPop = ref(false)


const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        entName: undefined,
        kin: undefined,
        phonenumber: undefined,
        dateRange: []
    },
});

const { queryParams, form } = toRefs(data);

/** 查询列表 */
const getList = () => {
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
        detectionList.value = [{}];
        total.value = detectionList.value.length;
    }, 1000);
    // listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    //     loading.value = false;
    //     detectionList.value = res.rows;
    //     total.value = res.total;
    // });
};

getList();

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    proxy.resetForm("queryRef");
    handleQuery();
};

/** 重置操作表单 */
const reset = () => {
    form.value = {
        userName: undefined,
        entName: undefined,
        kin: undefined,
        phonenumber: undefined,
        dateRange: []
    };
    proxy.resetForm("userRef");
};

//详情
const handleDetails = (row, activeStr) => {
    if (activeStr) {
        tabActiveName.value = activeStr
    } else {
        tabActiveName.value = 'task'
    }
    detailsInfo.value = row
    isShowDetailsPop.value = true
};

//任务转移
const handleChangePlan = (row) => {
    changeAssignPlanInfo.value = row
    isShowChangeAssignPlanPop.value = true
};
//确认转移
const sureChangeAssignPlan = () => {
    proxy.$modal.confirm('是否确认对该任务执行 "任务转移" ？').then(function () {

    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("操作成功");
    }).catch(() => { });
}


//任务认领
const sureClaim = (row) => {
    proxy.$modal.confirm('是否确认 "认领" 该检测任务？').then(function () {

    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("操作成功");
    }).catch(() => { });
}

//拒绝认领
const refuseClaim = (row) => {
    proxy.$modal.confirm('是否确认 "拒绝认领" 该检测任务？').then(function () {

    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("操作成功");
    }).catch(() => { });
}

</script>
 

<style lang="scss" scoped>
.dialog-item-title {
    color: #000;
    font-size: 17px;
    padding-left: 10px;
    margin: 0 20px;
    border-left: 4px #00BFFF solid;
}

.now-select-txt {
    font-size: 15px;
    color: #fff;
    background: #00BFFF;
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;

    span {
        font-size: 20px;
        font-weight: bold;
        margin: 0 10px;
    }

    div {
        cursor: pointer;
        margin-left: 30px;
        font-weight: bold;
    }
}

.table-item-div {
    color: #00BFFF;
    text-align: left;
    cursor: pointer;

    div {
        margin: 5px;
        word-break: break-all;
    }
}
</style>